<!--首页的-找回密码-->
<style lang="less" scoped>
  .btn-large {
    border-radius: 0;
  }
</style>


<template>
  <div>
    <div class="form-wrap">
      <div class="form-wrap-row" v-if="!forget">
        <div class="line displayflex">
          <div class="label">名称</div>
          <div class="ipt flex1">
            {{carname}}
          </div>
        </div>
      </div>
      <div class="form-wrap-row">
        <div class="line displayflex">
          <div class="label">手机号码</div>
          <div class="ipt flex1" v-if="!forget">
            {{ContactTel}}
          </div>
          <div class="ipt flex1" v-if="forget">
            <input type="text" placeholder="请输入手机号" v-model="ContactTel">
          </div>
        </div>
      </div>
      <div class="form-wrap-row">
        <div class="line displayflex">
          <div class="label">验证码</div> 
          <div class="ipt flex1">
            <input type="text" placeholder="点击输入" v-model="telcode" autocomplete="new-password">
          </div>
          <div class="btn-code" @click="runcode">{{btntext}}</div>
        </div>
      </div>
      <div class="form-wrap-row">
        <div class="line displayflex">
          <div class="label">新密码</div> 
          <div class="ipt flex1">
            <input type="password" placeholder="请输入新的密码" v-model="newpwd" autocomplete="new-password">
          </div>
        </div>
      </div>
      <div class="form-wrap-row">
        <div class="line displayflex">
          <div class="label">确认密码</div> 
          <div class="ipt flex1">
            <input type="password" placeholder="请输入再次输入密码" v-model="conpwd" autocomplete="new-password">
          </div>
        </div>
      </div>
    </div>
    <div class="form-btn">
      <div class="btn-large" @click="uppwd()">保存</div>
    </div>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      newpwd: '',
      conpwd: '',
      id: '',
      second: 60,
      oldsecond: 60,
      disabled: true,
      btntext: '点击获取',
      clock: null,
      code: '',
      carname: '',
      ContactTel: '',
      telcode: '',
    };
  },
  computed:{
    //是否是忘记密码的页面
    forget(){
      return this.$route.query.forget?true:false;
    },
    userinfo(){
      return localStorage.getItem('userinfo') === null?null:JSON.parse(localStorage.getItem('userinfo'));
    }
  },
  methods: {
    getData: function() {
      if(localStorage.userinfo){
        var userinfo = JSON.parse(localStorage.userinfo);
        this.id = userinfo.StaffID;
        this.ContactTel = userinfo.LogonUser;
        this.carname = userinfo.Name;
      }
    },
    uppwd: function() {
      var self = this;
      var testTel = /^1[345789]\d{9}$/;
      if(!this.ContactTel || !testTel.test(this.ContactTel)){
        this.Toast('请输入您的正确手机号码！');
        return false;
      }
      if (this.newpwd == '') {
        this.Toast('请输入密码！');
        return false;
      };
      if (this.code != this.telcode || !this.telcode) {
        this.Toast('请填写正确的验证码！');
        return false;
      }
      if (this.newpwd != this.conpwd) {
        this.Toast('两次输入密码不一致！');
        return false;
      }
      if(this.newpwd.length<6){
        this.Toast('密码长度至少6位！');
        return false;
      }
      let query = {
          Pwd: this.conpwd,
          StaffID: this.id,
          LogonUser: this.ContactTel,
      };
      if(this.userinfo){
        let addon = {
          TenantGuid: this.userinfo.TenantGuid,
          CorpGuid: this.userinfo.CorpGuid,
          UpdateUserId: this.userinfo.UpdateUserId,
          UpdateUserName: this.userinfo.UpdateUserName,
        };
        Object.assign(query, addon);
      }
      this.Ajax.post('UpdatePassword',query).then((resp) => {
        if (resp.IsSuccess) {
          localStorage.clear();
          this.$vux.toast.show({
            text: '密码修改成功！',
            type: 'success',
            onHide () {
              self.$router.replace({
                path:'/login'
              })
            }
          });
        } else {
          this.Toast({
            message: resp.ErrorMessage || '操作失败，请稍后重试'
          });
        }
      });
    },
    runcode: function() {
      let testTel = /^1[345789]\d{9}$/,
          Num = '';
      if(!this.ContactTel || !testTel.test(this.ContactTel)){
        this.Toast(`请输入您的正确手机号码！`);
        return false;
      } 
      if (!this.disabled) {
        return false;
      }
      this.disabled = false;
      this.btntext = this.second + '秒后可重新获取';
      this.clock = window.setInterval(() =>{
        this.sendCode()
      }, 1000);
      for (var i = 0; i < 4; i++) {
        Num += Math.floor(Math.random() * 10);
      }
      this.code = Num;
      // 自动回填
      //this.telcode= this.code;
      let query = {
            MobileNo:this.ContactTel,
            Content:`【恋链】 您的验证码是：${this.code}。如非本人操作，请忽略本短信`,
          };
      this.Ajax.post('SendMessage',query).then((resp) => {
        if (resp.Data.Status != '0') {
          window.clearInterval(this.clock);
          this.second = this.oldsecond;
          this.btntext = '点击获取';
          this.disabled = true;
          this.Toast({
              message: '验证码发送失败，请稍后再试！',
          });
        }else if(resp.IsSuccess && resp.Data.Status == '0'){
          this.Toast({
              message: '验证码发送成功！',
          });
        }
      });
    },
    sendCode: function() {
      this.second--;
      this.disabled = false;
      this.btntext = this.second + '秒后可重新获取';
      if (this.second == 0) {
        window.clearInterval(this.clock);
        this.second = this.oldsecond;
        this.btntext = '点击获取';
        this.disabled = true;
      }
    }
  },
  created() {
    if(this.forget){
      localStorage.clear();
      document.title = '忘记密码';
      return false;
    }else{
      document.title = '修改密码';
      this.getData();
    }
  }
};
</script>